<!--
 * @description 闯关列表组件
 * @author gaohailan
 * @date 2022/11/13
 -->
<template>
  <div
      v-if="list.length >0"
      class="rush-list-comp"
      :style="{
      'padding-top': px2rem(option.top) || 0,
      'padding-bottom': px2rem(option.bottom) || 0,
    }"
  >
    <empty v-if="list.length == 0"/>
    <van-pull-refresh id="rushIndex" v-model="isLoading" @refresh="onRefresh">
      <van-list
          v-model="loading"
          :finished="finished"
          :finished-text="finishedText"
          :immediate-check="false"
          :offset="20"
          @load="onLoad"
      >
        <ul>
          <li v-for="(item, index) in list" :key="index">
            <section class="top">
              <van-image :src="setImgPath(getMapping(item, 'imgId'), getMapping(item, 'imgUrl'))" :fit="imgType">
                <template v-slot:loading>
                  <van-loading type="spinner" size="20"/>
                </template>
                <template v-slot:error>
                  <img src="../../images/base/error-icon.png" alt>
                </template>
              </van-image>
              <section class="top-info">
                <section class="info-left etc">
                  <div class="left-name etc">{{ item.name || '' }}</div>
                  <span class="left-rank">查看排名</span>
                  <!-- <div class="left-rank">排名：{{ item.myRank || 0 }}/{{ item.personTotal || 0 }}</div> -->
                </section>
                <section class="info-right"/>
              </section>
            </section>
            <!-- <section class="down" @click="handleRushRank(item)">
              <section class="down-img">
                <van-image :src="item.firstUserViewUrl">
                  <template v-slot:loading>
                    <van-loading type="spinner" size="20" />
                  </template>
                  <template v-slot:error>
                    <img src="../../images/base/error-icon.png" alt />
                  </template>
                </van-image>
              </section>
              <section class="down-name etc">{{ item.firstUserRealName || '' }}</section>
              <section class="down-score">{{ item.firstScore || '' }}分</section>
            </section> -->
          </li>
        </ul>
      </van-list>
    </van-pull-refresh>
    <!--    <img class="main-rank" src="./images/rank.png" @click="handleRank()">-->
  </div>
</template>

<script>
import empty from '../../../empty'
import mixins from './../mixins'

export default {
  name: 'RushListComp',
  components: {empty},
  mixins: [mixins],
  props: {
    option: {
      type: Object,
      default() {
        return {}
      }
    },
    isInitData: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      loading: false, // 是否处于加载状态
      finished: false, // 是否已加载完所有数据
      isLoading: false, // 是否处于下拉刷新状态
      finishedText: '已经到底了',
      list: [], // 列表数据
      /** 接口参数 start */
      classifyId: '', // 分类id
      page: 1,
      pageSize: 10,
      myFlag: '',
      souMold: '',
      classLabel: '',
      /** 接口参数 end */
    }
  },

  async created() {
    if (this.isInitData) {
      this.pageSize = this.option.pageSize || 0
      this.souMold = this.option.souMold
      this.classLabel = this.option.classLabel
      this.seflLoadData()
    } else {
      this.list = [
        {
          imgUrl: '',
          name: '闯关一'
        },
        {
          imgUrl: '',
          name: '闯关二'
        },
        {
          imgUrl: '',
          name: '闯关三'
        },
        {
          imgUrl: '',
          name: '闯关四'
        }
      ]
      this.finished = true
    }
  },

  methods: {
    handleRank() {
      // this.$router.push({ path: '/rush/rank' })
    },
    /**
     * 用于initData方法调用完设置数据
     */
    setData(result) {
      this.isLoading = false
      this.loading = false
      if (result !== 'error') {
        const res = result.dataList
        const {data} = res
        if (this.page === 1) {
          this.list = []
        }
        this.list.push(...data.rows)
        if (this.list.length >= data.total) {
          this.finished = true
        } else {
          this.finished = false
        }
      }


    },
    /**
     * 刷新
     */
    refresh4other() {
      return new Promise((sesolve, reject) => {
        this.finishedText = ''
        this.finished = true
        this.page = 1
        this.list = []
        if (this.classifyId === 'my') {
          this.classifyId = ''
          this.myFlag = 1
        } else {
          this.myFlag = ''
        }
        this.seflLoadData()
        return new Promise(() => {
        })
      })
    },
    /**
     * 加载数据
     */
    async seflLoadData() {
      await this.getDataByCode('dataList')
    },

    /**
     * 刷新
     */
    onRefresh() {
      return new Promise((sesolve, reject) => {
        this.finishedText = ''
        this.finished = true
        this.page = 1
        this.list = []
        this.seflLoadData()
        return new Promise(() => {
        })
      })
    },

    /**
     * 上拉加载
     */
    onLoad() {
      this.page += 1
      this.seflLoadData()
    }
  }
}
</script>

<style scoped lang="scss">
@import '@/styles/utility/rem.scss';

.rush-list-comp {
  position: relative;

  .van-pull-refresh {
    /*  height: calc(88vh - 148px);
      overflow: auto;
      -webkit-overflow-scrolling: touch;
      padding: 0;*/

    ul {
      padding: rem(30) rem(30) 0;
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;

      li {
        position: relative;
        flex: 0 0 auto;
        width: rem(320);
        height: rem(180);
        margin-bottom: rem(30);
        background: #ffffff;
        border-radius: rem(12);
        box-shadow: rem(5) rem(10) rem(10) #e5e5e5;
        overflow: hidden;

        .top {
          height: 100%;
          border-radius: rem(12);
          position: relative;

          .van-image {
            width: 100%;
            height: 100%;
            border-radius: rem(12) rem(12) 0 0;

            .van-image__img {
              border-radius: rem(12) rem(12) 0 0;
            }

            .van-image__error {
              border-radius: rem(12) rem(12) 0 0;

              img {
                width: rem(120);
                height: rem(120);
              }
            }
          }

          .top-info {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.55);
            border-radius: rem(12) rem(12) 0 0;
            display: flex;
            align-items: center;
            justify-content: space-between;
            box-sizing: border-box;
            padding: 0 rem(20);

            .info-left {
              flex: 1;

              .left-name {
                font-size: rem(30);
                font-family: PingFang SC;
                font-weight: 600;
                color: #fffefe;
                line-height: rem(40);
                margin-bottom: rem(15);
              }

              .left-rank {
                font-size: rem(24);
                font-family: PingFang SC;
                font-weight: 400;
                color: #fffefe;
                line-height: rem(40);
                opacity: 0.7;
              }
            }

            .info-right {
              flex-shrink: 0;
              width: rem(13);
              height: rem(24);
              background: url('./images/more.png') center no-repeat;
              background-size: rem(13) rem(24);
            }
          }
        }

        .down {
          border-radius: 0 0 rem(12) rem(12);
          height: rem(90);
          display: flex;
          align-items: center;
          padding: 0 rem(20);

          .down-img {
            width: rem(72);
            height: rem(72);
            background: url('./images/medal.png') center no-repeat;
            background-size: rem(72) rem(72);
            position: relative;

            .van-image {
              position: absolute;
              bottom: rem(2);
              left: 50%;
              transform: translateX(-50%);
              width: rem(50);
              height: rem(50);
              border-radius: 50%;

              .van-image__img {
                border-radius: 50%;
              }

              .van-image__error {
                border-radius: 50%;

                img {
                  width: rem(30);
                  height: rem(30);
                }
              }
            }
          }

          .down-name {
            flex: 1;
            padding-left: rem(10);
            font-size: reM(24);
            font-family: PingFang SC;
            font-weight: 400;
            color: #333333;
          }

          .down-score {
            flex-shrink: 0;
            font-size: rem(24);
            font-family: PingFang SC;
            font-weight: 400;
            color: #333333;
          }
        }
      }
    }
  }

  .main-rank {
    width: rem(140);
    height: rem(154);
    position: absolute;
    right: rem(10);
    bottom: rem(340);
    z-index: 3;
  }
}
</style>
